<div class="contentBox pad clrP clrBr clrSh3 tx3">
  <form class="padSmKids padStack">
    <div class="flexVCent">
      <h2 class="h4 clrT flexExpand <% if (ob.listPosition === 1) print('required') %>"><%= ob.polyT('editListing.shippingOptions.optionHeading', { listPosition: ob.listPosition }) %></h2
      >
      <a class="clrBr clrP clrSh2 margRSm btn js-removeShippingOption"><%= ob.polyT('editListing.shippingOptions.btnDeleteShippingOption') %></a>
    </div>
    <hr class="clrBr rowMd" />
    <div class="flexRow">
      <label for="<%= `shipDestinationsSelect_${ob.cid}` %>" class="required"><%= ob.polyT('editListing.shippingOptions.shippingDestinations') %></label>        
      <div class="flexExpand">
        <div class="flexHRight flexVCent">
          <a class="js-clearAllShipDest tx6"><%= 
          ob.polyT('editListing.shippingOptions.clearAll') %></a>
        </div>
      </div>
    </div>
    <% if (ob.errors['regions']) print(ob.formErrorTmpl({ errors: ob.errors['regions'] })) %>
    <select id="<%= `shipDestinationsSelect_${ob.cid}` %>" multiple name="regions" class="clrBr clrP clrSh2" placeholder="<%= ob.polyT('editListing.shippingOptions.regionsPlaceholder') %>"></select>
    <div class="flexRow gutterH">
      <div class="col6 simpleFlexCol">
        <label for="<%= `shipOptionTitle_${ob.cid}` %>" class="required"><%= ob.polyT('editListing.shippingOptions.nameLabel') %></label>
        <% if (ob.errors['name']) print(ob.formErrorTmpl({ errors: ob.errors['name'] })) %>
        <input type="text" class="clrBr clrP clrSh2 marginTopAuto" name="name" id="<%= `shipOptionTitle_${ob.cid}` %>" value="<%= ob.name %>" placeholder="<%= ob.polyT('editListing.shippingOptions.namePlaceholder') %>">
      </div>
      <div class="col6 simpleFlexCol">
        <label for="<%= `shipOptionType_${ob.cid}` %>" class="required"><%= ob.polyT('editListing.shippingOptions.typeLabel') %></label>
        <% if (ob.errors['type']) print(ob.formErrorTmpl({ errors: ob.errors['type'] })) %>
        <select id="<%= `shipOptionType_${ob.cid}` %>" name="type" class="clrBr clrP clrSh2 marginTopAuto">
          <% ob.shippingTypes.forEach(shippingType => { %>
            <option value="<%= shippingType %>" <% if (ob.type === shippingType) print('selected') %>><%= ob.polyT(`editListing.shippingOptions.shippingTypes.${shippingType}`) %></option>
          <% }); %>
        </select>
      </div>
    </div>
    <div class="flexRow gutterH js-serviceSection <% if (ob.type === 'LOCAL_PICKUP') print('hide') %>">
      <div class="col3">
        <label class="required"><%= ob.polyT('editListing.shippingOptions.services.nameLabel') %></label>
      </div>
      <div class="col3">
        <label class="required"><%= ob.polyT('editListing.shippingOptions.services.estimatedDeliveryLabel') %></label>      
      </div>
      <div class="col3">
        <label class="required"><%= ob.polyT('editListing.shippingOptions.services.priceLabel') %></label>
      </div>
      <div class="col3">
        <label class="required"><%= ob.polyT('editListing.shippingOptions.services.additionalItemPriceLabel') %></label>
      </div>      
    </div>
    <div class="js-servicesWrap js-serviceSection servicesWrap padKids padStack padTop0 <% if (ob.type === 'LOCAL_PICKUP') print('hide') %>"></div>
    <div class="flexRow pad js-serviceSection <% if (ob.type === 'LOCAL_PICKUP') print('hide') %>">
        <a class="clrBr clrP clrTEm js-btnAddService"><%= ob.polyT('editListing.shippingOptions.services.addService') %></a>
      </div>
    </div>
  </form>
</div>